<template>
  <div class="analytics-page">
    <!-- 核心指标 -->
    <el-row :gutter="20" class="kpi-row">
      <el-col :xs="12" :sm="6" v-for="kpi in kpiData" :key="kpi.id">
        <el-card class="kpi-card">
          <div class="kpi-icon" :style="{ background: kpi.color }">
            <el-icon :size="32">
              <component :is="kpi.icon" />
            </el-icon>
          </div>
          <div class="kpi-content">
            <div class="kpi-label">{{ kpi.label }}</div>
            <div class="kpi-value">{{ kpi.value }}</div>
            <div class="kpi-trend" :class="kpi.trend">
              {{ kpi.change }}
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 数据分析图表 -->
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card>
          <template #header>
            <span>📈 会员增长趋势</span>
          </template>
          <div class="chart-container">
            <div class="chart-placeholder">会员增长曲线图（需要ECharts）</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <template #header>
            <span>🎯 会员等级分布</span>
          </template>
          <div class="chart-container">
            <div class="chart-placeholder">会员等级饼图（需要ECharts）</div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="12">
        <el-card>
          <template #header>
            <span>💰 消费分析</span>
          </template>
          <div class="analysis-list">
            <div class="analysis-item">
              <span class="item-label">人均消费:</span>
              <span class="item-value">¥{{ avgConsumption.toLocaleString() }}</span>
            </div>
            <div class="analysis-item">
              <span class="item-label">最高消费:</span>
              <span class="item-value">¥{{ maxConsumption.toLocaleString() }}</span>
            </div>
            <div class="analysis-item">
              <span class="item-label">客单价:</span>
              <span class="item-value">¥{{ avgOrderAmount.toLocaleString() }}</span>
            </div>
            <div class="analysis-item">
              <span class="item-label">复购率:</span>
              <span class="item-value success">{{ repurchaseRate }}%</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <template #header>
            <span>⭐ 积分分析</span>
          </template>
          <div class="analysis-list">
            <div class="analysis-item">
              <span class="item-label">总发放积分:</span>
              <span class="item-value">{{ totalPointsIssued.toLocaleString() }}</span>
            </div>
            <div class="analysis-item">
              <span class="item-label">已使用积分:</span>
              <span class="item-value">{{ totalPointsUsed.toLocaleString() }}</span>
            </div>
            <div class="analysis-item">
              <span class="item-label">积分余额:</span>
              <span class="item-value">{{ totalPointsBalance.toLocaleString() }}</span>
            </div>
            <div class="analysis-item">
              <span class="item-label">积分使用率:</span>
              <span class="item-value success">{{ pointsUsageRate }}%</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- RFM分析 -->
    <el-card style="margin-top: 20px;">
      <template #header>
        <div class="card-header">
          <span>📊 RFM客户价值分析</span>
          <el-button size="small" @click="handleRefreshRFM">
            <el-icon><Refresh /></el-icon>
            刷新分析
          </el-button>
        </div>
      </template>

      <el-table :data="rfmData" border>
        <el-table-column prop="segment" label="客户分群" width="150">
          <template #default="{ row }">
            <el-tag :type="getRFMTag(row.segment)">{{ row.segment }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="description" label="描述" width="250" />
        <el-table-column prop="count" label="会员数" width="100">
          <template #default="{ row }">
            <el-tag>{{ row.count }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="avgConsumption" label="人均消费" width="120">
          <template #default="{ row }">
            ¥{{ row.avgConsumption.toLocaleString() }}
          </template>
        </el-table-column>
        <el-table-column prop="strategy" label="营销策略" />
        <el-table-column label="操作" width="150">
          <template #default="{ row }">
            <el-button link type="primary" @click="handleViewSegment(row)">查看会员</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, markRaw } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus, UserFilled, TrendCharts, Wallet, Star, Refresh } from '@element-plus/icons-vue'

const kpiData = ref([
  { id: 1, label: '会员总数', value: '15,678', change: '+12.5%', trend: 'up', color: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', icon: markRaw(UserFilled) },
  { id: 2, label: '活跃会员', value: '12,345', change: '+8.3%', trend: 'up', color: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)', icon: markRaw(TrendCharts) },
  { id: 3, label: '累计消费', value: '¥8.56M', change: '+15.7%', trend: 'up', color: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)', icon: markRaw(Wallet) },
  { id: 4, label: '累计积分', value: '2.34M', change: '+21.2%', trend: 'up', color: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)', icon: markRaw(Star) }
])

const avgConsumption = ref(8456)
const maxConsumption = ref(125678)
const avgOrderAmount = ref(1256)
const repurchaseRate = ref(68.5)

const totalPointsIssued = ref(5678900)
const totalPointsUsed = ref(2345600)
const totalPointsBalance = ref(3333300)
const pointsUsageRate = ref(41.3)

const rfmData = ref([
  { segment: '重要价值客户', description: '最近消费、高频率、高金额', count: 456, avgConsumption: 125678, strategy: 'VIP专属服务，高端产品推荐' },
  { segment: '重要保持客户', description: '较久消费、高频率、高金额', count: 234, avgConsumption: 98765, strategy: '定期关怀，唤醒消费' },
  { segment: '重要发展客户', description: '最近消费、低频率、高金额', count: 567, avgConsumption: 76543, strategy: '增加互动，提高频次' },
  { segment: '重要挽留客户', description: '较久消费、低频率、高金额', count: 123, avgConsumption: 65432, strategy: '流失预警，挽留措施' },
  { segment: '一般价值客户', description: '最近消费、高频率、低金额', count: 2345, avgConsumption: 12345, strategy: '促销活动，提升客单价' },
  { segment: '一般保持客户', description: '较久消费、高频率、低金额', count: 1234, avgConsumption: 9876, strategy: '定期维护，保持活跃' },
  { segment: '一般发展客户', description: '最近消费、低频率、低金额', count: 3456, avgConsumption: 5678, strategy: '优惠券刺激，培养习惯' },
  { segment: '一般挽留客户', description: '较久消费、低频率、低金额', count: 789, avgConsumption: 3456, strategy: '流失客户，尝试召回' }
])

const getRFMTag = (segment) => {
  if (segment.includes('重要价值')) return 'danger'
  if (segment.includes('重要')) return 'warning'
  return 'info'
}

const handleRefreshRFM = () => {
  ElMessage.success('RFM分析已刷新')
}

const handleViewSegment = (row) => {
  ElMessage.info(`查看${row.segment}会员列表`)
}
</script>

<style scoped>
.analytics-page {
  padding: 20px;
  background: #f5f5f5;
  min-height: 100vh;
}

.kpi-row {
  margin-bottom: 20px;
}

.kpi-card {
  border: none;
  border-radius: 8px;
}

.kpi-card :deep(.el-card__body) {
  display: flex;
  align-items: center;
  padding: 20px;
}

.kpi-icon {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  margin-right: 15px;
}

.kpi-content {
  flex: 1;
}

.kpi-label {
  font-size: 14px;
  color: #909399;
  margin-bottom: 8px;
}

.kpi-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 5px;
}

.kpi-trend {
  font-size: 13px;
}

.kpi-trend.up {
  color: #67c23a;
}

.chart-container {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chart-placeholder {
  color: #909399;
  background: #fafafa;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

.analysis-list {
  padding: 20px;
}

.analysis-item {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px dashed #ebeef5;
}

.analysis-item:last-child {
  border-bottom: none;
}

.item-label {
  color: #606266;
}

.item-value {
  font-weight: bold;
  font-size: 18px;
  color: #303133;
}

.item-value.success {
  color: #67c23a;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>

